<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <link href="css/style.css?v=1" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="js/iscroll.js"></script>
</head>

<body>
    <div class="index_head">
        <div class="img">
            <img src="icon/user_active.png">
        </div>
        <input type="text" placeholder="请输入品牌或商家名">
        <div class="img">
            <img src="icon/gouwuche.png">
        </div>
    </div>
    <div class="slider">
        <ul>
            <li>
                <a href="" target="_blank">
                    <img src="http://img1.imgtn.bdimg.com/it/u=1260278640,3769349609&fm=27&gp=0.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="" target="_blank">
                    <img src="http://img5.imgtn.bdimg.com/it/u=1203448106,3220187713&fm=27&gp=0.jpg" alt="">
                </a>
            </li>
        </ul>
    </div>
    <div class="head_nav">
        <a href="checkup">
            <div class="single">
                <img src="icon/jianding.png">
                <p>实物鉴定</p>
            </div>
        </a>
        <a href="customize">
        <div class="single">
            <img src="icon/dingzhi.png">
            <p>商品定制</p>
        </div>
        </a>
        <a href="purchase">
        <div class="single">
            <img src="icon/caigou.png">
            <p>商品采购</p>
        </div>
        </a>
        <a href="idle/index.html">
            <div class="single">
                <img src="icon/xianzhi.png">
                <p>闲置转让</p>
            </div>
        </a>
        <a href="designer">
            <div class="single">
                <img src="icon/shejishi.png">
                <p>设计师</p>
            </div>
        </a>
        <div class="clear"></div>
    </div>
    <div class="next_nav">
        <div class="single">
            <div class="left">
                <p class="p1">精选收藏</p>
                <p class="p2">会员级别优先收藏</p>
            </div>
            <div class="right">
                <img src="icon/tuijian.png">
            </div>
        </div>
        <a href="mall">
            <div class="single">
                <div class="left">
                    <p class="p1">精品商城</p>
                    <p class="p2">珠宝商城</p>
                </div>
                <div class="right">
                    <img src="icon/shangcheng.png">
                </div>
            </div>
        </a>
        <div class="clear"></div>
    </div>
    <!-- 分类 -->
    <div class="fenlei wrapper c1" id="wrapper">
        <ul>
            <li class="single">
                <img src="img/zuanshi.jpg">
                <p>钻石</p>
            </li>
            <li class="single">
                <img src="img/feicui.jpg">
                <p>翡翠</p>
            </li>
            <li class="single">
                <img src="img/xianglian.jpg">
                <p>这是一个分类</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single active">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
        </ul>

        <div class="clear"></div>
    </div>
    <!--商品 -->
    <div class="shop wrapper1 c2">
        <ul>
            <li class="single">
                <img src="img/shangpin.jpg">
                <p class="p1">黄金足金3D硬金足...</p>
                <p class="p2">GD001101 约1.79克-约1.82克</p>
                <p class="p3">￥60000
                    <span class="box">A级</span>
                </p>
            </li>
            <li class="single">
                <img src="img/shangpin.jpg">
                <p class="p1">黄金足金3D硬金足...</p>
                <p class="p2">GD001101 约1.79克-约1.82克</p>
                <p class="p3">￥60000
                    <span class="box">A级</span>
                </p>
            </li>
            <li class="single">
                <img src="img/shangpin.jpg">
                <p class="p1">黄金足金3D硬金足...</p>
                <p class="p2">GD001101 约1.79克-约1.82克</p>
                <p class="p3">￥60000
                    <span class="box">A级</span>
                </p>
            </li>
            <li class="single">
                <img src="img/shangpin.jpg">
                <p class="p1">黄金足金3D硬金足...</p>
                <p class="p2">GD001101 约1.79克-约1.82克</p>
                <p class="p3">￥60000
                    <span class="box">A级</span>
                </p>
            </li>
            <li class="single">
                <img src="img/shangpin.jpg">
                <p class="p1">黄金足金3D硬金足...</p>
                <p class="p2">GD001101 约1.79克-约1.82克</p>
                <p class="p3">￥60000
                    <span class="box">A级</span>
                </p>
            </li>
            <li class="single">
                <img src="img/shangpin.jpg">
                <p class="p1">黄金足金3D硬金足...</p>
                <p class="p2">GD001101 约1.79克-约1.82克</p>
                <p class="p3">￥60000
                    <span class="box">A级</span>
                </p>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    <!-- 商家 -->
    <div class="fenlei wrapper2 c3" id="wrapper">
        <ul>
            <li class="single">
                <img src="img/shangjia1.jpg">
                <p>六福珠宝</p>
            </li>
            <li class="single">
                <img src="img/shangjia2.jpg">
                <p>周生生</p>
            </li>
            <li class="single">
                <img src="img/xianglian.jpg">
                <p>这是一个商家</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single active">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
            <li class="single">
                <img src="img/fenlei.png">
                <p>项链</p>
            </li>
        </ul>

        <div class="clear"></div>
    </div>
    <!--设计师 -->
    <div class="shop wrapper3 c4">
        <ul>
            <li class="single">
                <img src="img/shejishi.jpg">
                <p class="p1">戴翻</p>
                <p class="p2">建筑设计师</p>

            </li>
            <li class="single">
                <img src="img/shejishi2.jpg">
                <p class="p1">胡如珊</p>
                <p class="p2">大中华区40位40岁以下的卓越年轻设计师</p>

            </li>
            <li class="single">
                <img src="img/shejishi2.jpg">
                <p class="p1">胡如珊</p>
                <p class="p2">大中华区40位40岁以下的卓越年轻设计师</p>

            </li>
            <li class="single">
                <img src="img/shejishi2.jpg">
                <p class="p1">胡如珊</p>
                <p class="p2">大中华区40位40岁以下的卓越年轻设计师</p>

            </li>
        </ul>
    </div>
    <!--闲置转让 -->
    <div class="xianzhi c5 ">
        <div class="head1">
            — &nbsp;闲置转让 &nbsp;—
        </div>
        <div class="c5 wrapper4 shop">
            <ul>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <!--闲置转让 -->
    <div class="xianzhi ">
        <div class="head1">
            — &nbsp;商品推荐 &nbsp;—
        </div>
        <div class="c6 wrapper5 shop">
            <ul>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
                <li class="single">
                    <img src="img/shangpin.jpg">
                    <p class="p1">黄金足金3D硬金足...</p>
                    <p class="p2">8成新，欲购从速</p>
                    <p class="p3">￥60000
                        <span class="box">A级</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <br>
    <br>
    <br>
    <!-- 底部菜单栏 -->
    <div class="foot">
        <div class="single">
            <img src="icon/home_active.png">
            <p>首页</p>
        </div>
        <a href="news">
            <div class="single">
                <img src="icon/xiaoxi.png">
                <p>消息</p>
            </div>
        </a>
        <a href="add.html">
        <div class="single">
            <img src="icon/send.png">
            <p>发布</p>
        </div>
        </a>
        <a href="auction">
            <div class="single">
                <img src="icon/paimai.png">
                <p>拍卖</p>
            </div>
        </a>
        <a href="member">
            <div class="single">
                <img src="icon/user.png">
                <p>我的</p>
            </div>
        </a>
    </div>
</body>
<script type="text/javascript" src="js/yxMobileSlider.js"></script>
<script>
    $(".slider").yxMobileSlider({ width: 640, height: 360, during: 3000 })
</script>

<script>
    var ele = $(".c1 ul");
    ele.width((ele.find("li").length) * (ele.find("li").width() + 10) + 10);

    var ele = $(".c2 ul");
    ele.width((ele.find("li").length) * (ele.find("li").width() + 10) + 10);

    var ele = $(".c3 ul");
    ele.width((ele.find("li").length) * (ele.find("li").width() + 10) + 10);
    var ele = $(".c4 ul");
    ele.width((ele.find("li").length) * (ele.find("li").width() + 10) + 10);
    var ele = $(".c5 ul");
    ele.width((ele.find("li").length) * (ele.find("li").width() + 10) + 10);
    var ele = $(".c6 ul");
    ele.width((ele.find("li").length) * (ele.find("li").width() + 10) + 10);
    var myScroll = new IScroll('.wrapper', {
        scrollX: true,
        scrollY: false,
        disablePointer: true,
        disableTouch: false,
        eventPassthrough: true
    });
    var myScroll = new IScroll('.wrapper1', {
        scrollX: true,
        scrollY: false,
        disablePointer: true,
        disableTouch: false,
        eventPassthrough: true

    });
    var myScroll = new IScroll('.wrapper2', {
        scrollX: true,
        scrollY: false,
        disablePointer: true,
        disableTouch: false,
        eventPassthrough: true

    });
    var myScroll = new IScroll('.wrapper3', {
        scrollX: true,
        scrollY: false,
        disablePointer: true,
        disableTouch: false,
        eventPassthrough: true

    });
    var myScroll = new IScroll('.wrapper4', {
        scrollX: true,
        scrollY: false,
        disablePointer: true,
        disableTouch: false,
        eventPassthrough: true

    });
    var myScroll = new IScroll('.wrapper5', {
        scrollX: true,
        scrollY: false,
        disablePointer: true,
        disableTouch: false,
        eventPassthrough: true

    });
   //myScroll.scrollToElement('.active',true,true);
</script>

</html>